<template>
  <div class="managerMana-container common-container">
    <div class="chart-cont">
      <Lifeblood/>
    </div>
    <div class="common-top">
      <span class="left title" style="width: 60%">
        股票池({{ tableData.length }})<i
          class="el-icon-loading"
          v-if="loading"
        ></i
        ><br />
        <span class="tips">
        </span>
      </span>
      <div style="padding: 20px 0">
        <el-select
          v-model="query.orderBy"
          placeholder="排序方式"
          size="small"
          clearable
          style="margin-right: 10px; width: 100px"
        >
          <el-option label="时间排序" :value="0"> </el-option>
          <el-option label="板块排序" :value="1"> </el-option>
          <el-option label="涨幅排序" :value="2"> </el-option>
          <el-option label="跌幅排序" :value="3"> </el-option>
          <el-option label="低震幅排序" :value="4"> </el-option>
        </el-select>
        <el-button
          size="small"
          type="primary"
          @click="getData"
          :loading="loading"
          style="margin-right: 10px"
          >刷新
        </el-button>
        <!-- <el-button
          size="small"
          type="primary"
          @click="tableModel = !tableModel"
        >
          {{ tableModel ? "图形" : "表格" }}
        </el-button> -->
      </div>
    </div>
    <div class="common-bot" v-if="tableData.length">
      <el-table v-if="tableModel" :data="tableData" style="width: 100%">
        <el-table-column prop="title" label="股票名称" width="270" fixed>
          <template slot-scope="scope">
            <el-link
              :href="`https://quote.eastmoney.com/concept2/${scope.row.code}.html`"
              style="font-size: 18px;vertical-align: middle;"
              target="_blank"
            >
              <b>{{ scope.row.name }}</b>
              <i
                class="el-icon-s-flag"
                style="color: red"
                title="屠龙刀"
                v-if="dragonLayers.indexOf(scope.row.code) > -1"
              ></i>
            </el-link>
            <span style="cursor: pointer; font-size: 18px;vertical-align: middle;" slot="reference"
              >({{ scope.row.code }})</span
            >
            <div class="other-info" style="padding-top: 10px">
              涨幅:
              <span
                title="昨日涨幅"
                v-if="yesterday && yesterday.hasOwnProperty(scope.row.code)"
                :class="{
                  word_red: yesterday[scope.row.code].riseRatio > 0,
                  word_green: yesterday[scope.row.code].riseRatio < 0,
                }"
              >
                昨日:{{ yesterday[scope.row.code].riseRatio }}%
              </span>
              <span
                title="今日涨幅"
                style="font-size: 18px"
                :class="{
                  word_red: scope.row.info.riseRatio > 0,
                  word_green: scope.row.info.riseRatio < 0,
                }"
              >
                今日:{{ scope.row.info.riseRatio }}%
              </span>
              <div class="other-item datetime">
                <span class="other-name">关注日期:</span>
                <span class="other-val">{{ scope.row.datetime }}</span>
              </div>
              <div class="other-item">
                <span class="other-name">收录价:</span>
                <span class="other-val">{{ scope.row.price }}</span>
              </div>
              <div class="other-item">
                <span class="other-name">现价(涨幅):</span>
                <span class="other-val">
                  {{ scope.row.info.now }}
                  <span
                    title="涨幅"
                    :class="{
                      word_red: scope.row.currentProfitRatio > 0,
                      word_green: scope.row.currentProfitRatio < 0,
                    }"
                  >
                    &nbsp;{{ scope.row.currentProfitRatio }}%
                  </span>
                </span>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="section" label="版块" width="170">
          <template slot-scope="scope">
            <div :title="scope.row.info.concept">
              {{ scope.row.section }}
            </div>
            <div title="该版块关注的数量">
              版块关注数:{{ sectionCount[scope.row.section] }}
            </div>
            <el-tooltip
              class="item"
              effect="dark"
              content="涨停数/近五日总涨停数/跌停数"
              placement="top"
            >
              <b style="display: flex; align-items: center; margin-left: -5px"
                ><i
                  class="iconfont icon-zhang2 zhang"
                  style="font-size: 24px"
                ></i
                >{{
                  stopUpDatas[0].sectionStopUpCount[scope.row.section]
                }}&nbsp;/&nbsp;<i
                  class="iconfont icon-zongshouyi"
                  style="color: #ff7743; margin: 3px"
                ></i
                >{{
                  stopUpDatas[0].sectionCount[scope.row.section]
                }}&nbsp;/&nbsp;<i
                  class="iconfont icon-die1 die"
                  style="font-size: 24px"
                ></i
                >{{ stopUpDatas[0].sectionStopDownCount[scope.row.section] }}</b
              >
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="maxProfitRatio" label="最大涨幅">
          <template slot-scope="scope">
            <span
              title="最大涨幅"
              :class="{
                word_red: scope.row.maxProfitRatio > 0,
                word_green: scope.row.maxProfitRatio <= 0,
              }"
            >
              &nbsp;{{ scope.row.maxProfitRatio }}%
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="info.pe" label="市盈率" />
        <el-table-column
          prop="info.turnoverRatio"
          width="100"
          label="换手率(%)"
        />
        <el-table-column
          prop="info.maxTurnoverRatio"
          width="120"
          label="最大换手率(%)"
        >
          <template slot-scope="scope">
            <span :class="{ word_red_b: scope.row.active }">
              {{ scope.row.info.maxTurnoverRatio }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="lowAmplitudeTimes" label="低震幅分" />
        <el-table-column prop="info.score" label="AI评分" />
        <el-table-column prop="kLine" label="K线图" width="100">
          <template slot-scope="scope">
            <!-- <el-popover placement="right" width="1150" trigger="hover">
              <div>
                <img
                  :src="`http://webquoteklinepic.eastmoney.com/GetPic.aspx?nid=${
                    scope.row.info.eastMoneyFullCode
                  }&type=&unitWidth=-6&ef=&formula=KDJ&AT=1&imageType=KXL&timespan=${Math.random()}`"
                  :alt="`http://webquoteklinepic.eastmoney.com/GetPic.aspx?nid=${scope.row.info.eastMoneyFullCode}&type=&unitWidth=-6&ef=&formula=KDJ&AT=1&imageType=KXL&timespan=`"
                />

                <img
                  :src="`https://webquoteklinepic.eastmoney.com/GetPic.aspx?nid=${
                    scope.row.info.eastMoneyFullCode
                  }&type=M&unitWidth=-5&ef=&formula=KDJ&AT=1&imageType=KXL&timespan=${Math.random()}`"
                  :alt="`https://webquoteklinepic.eastmoney.com/GetPic.aspx?nid=${scope.row.info.eastMoneyFullCode}&type=M&unitWidth=-5&ef=&formula=KDJ&AT=1&imageType=KXL&timespan=`"
                />
                <img
                  :src="`https://webquoteklinepic.eastmoney.com/GetPic.aspx?nid=${
                    scope.row.info.eastMoneyFullCode
                  }&type=M30&unitWidth=-5&ef=&formula=KDJ&AT=1&imageType=KXL&timespan=${Math.random()}`"
                  :alt="`https://webquoteklinepic.eastmoney.com/GetPic.aspx?nid=${scope.row.info.eastMoneyFullCode}&type=M30&unitWidth=-5&ef=&formula=KDJ&AT=1&imageType=KXL&timespan=`"
                />
                <img
                  :src="`https://webquotepic.eastmoney.com/GetPic.aspx?imageType=t&type=M4&nid=${
                    scope.row.info.eastMoneyFullCode
                  }&timespan=${Math.random()}`"
                  :alt="`https://webquotepic.eastmoney.com/GetPic.aspx?imageType=t&type=M4&nid=${scope.row.info.eastMoneyFullCode}&timespan=`"
                />
              </div>
              <span style="cursor: pointer" slot="reference"
                >({{ scope.row.code }})</span
              >
            </el-popover> -->
            <span
              style="cursor: pointer; border-bottom: 1px solid #ff7743"
              title="点击查看"
              @click.stop="doShowKLine(scope.row)"
              >{{ scope.row.code }}</span
            >
          </template>
        </el-table-column>
        <el-table-column prop="actions" label="操作" width="90" v-if="false" fixed="right">
          <template slot-scope="scope">
            <el-popconfirm
              title="确定取关吗？"
              confirm-button-text="好的"
              cancel-button-text="不"
              @confirm="collect(scope.row, false)"
            >
              <el-link
                slot="reference"
                type="danger"
                style="margin-left: 3px"
                size="small"
              >
                取关
              </el-link>
            </el-popconfirm>
            <el-popconfirm
              title="确定完成吗？"
              confirm-button-text="好的"
              cancel-button-text="不"
              v-if="!scope.row.finished"
              @confirm="finished(scope.row.id)"
            >
              <el-link
                slot="reference"
                type="primary"
                style="margin-left: 3px"
                size="small"
              >
                完成
              </el-link>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <el-row
        v-else
        :gutter="5"
        v-for="(item, idx) in tableData"
        :key="idx"
        class="line line-panle"
      >
        <el-col :span="24" style="font-size: 12px; line-height: 150%">
          时间：{{ item.createTime | parseTime("{m}-{d} {h}:{i}") }}， 现价：<b
            >{{ item.info.now }}</b
          >
          <span
            title="浮盈"
            :class="{
              word_red: item.currentProfitRatio > 0,
              word_green: item.currentProfitRatio < 0,
            }"
            >({{ item.currentProfitRatio }}%)</span
          >， 最高：{{ item.info.high }}， 最低：{{ item.info.low }}， 市值：{{
            item.info.totalValueY
          }}， 流通市值：{{ item.info.circulationValueY }}， 市盈率：{{
            item.info.pe
          }}， 换手率：{{ item.info.turnoverRatio }}%/<span title="近期最大换手"
            >{{ item.info.maxTurnoverRatio }}%</span
          >， 成交额：{{ item.info.moneyY }}亿，
          <b
            >最大涨幅：<span
              title="浮盈"
              :class="{
                word_red: item.maxProfitRatio > 0,
                word_green: item.maxProfitRatio < 0,
              }"
              >{{ item.maxProfitRatio }}%</span
            ></b
          >， <b>所属概念：</b>{{ item.info.concept }}， <b>低震幅分：</b
          >{{ item.lowAmplitudeTimes }}
        </el-col>
        <el-col :span="6">
          <div
            class="grid-content bg-purple"
            style="font-size: 12px; line-height: 150%"
          >
            <img
              :src="`https://webquotepic.eastmoney.com/GetPic.aspx?imageType=t&type=M4&nid=${
                item.info.eastMoneyFullCode
              }&timespan=${Math.random()}`"
              :alt="`https://webquotepic.eastmoney.com/GetPic.aspx?imageType=t&type=M4&nid=${item.info.eastMoneyFullCode}&timespan=`"
              :title="item.info.concept"
            />
            <div>
              <span
                title="昨日涨幅"
                v-if="yesterday.hasOwnProperty(item.code)"
                :class="{
                  word_red: yesterday[item.code].riseRatio > 0,
                  word_green: yesterday[item.code].riseRatio < 0,
                }"
              >
                {{ yesterday[item.code].riseRatio }}%
              </span>
              <el-link
                :href="`https://quote.eastmoney.com/concept2/${item.code}.html`"
                target="_blank"
              >
                <b>{{ item.name }}</b>
                <i
                  class="el-icon-s-flag"
                  style="color: red"
                  title="屠龙刀"
                  v-if="dragonLayers.indexOf(item.code) > -1"
                ></i>
              </el-link>
              ({{ item.code }})
              <span
                title="今日涨幅"
                :class="{
                  word_red: item.info.riseRatio > 0,
                  word_green: item.info.riseRatio < 0,
                }"
              >
                {{ item.info.riseRatio }}%
              </span>
              振幅：{{ item.info.amplitude }}%
            </div>
            <div>
              <span title="该版块关注的数量">
                {{ sectionCount[item.info.section] }}
              </span>
              {{ item.info.section }}
              <el-button
                type="danger"
                size="mini"
                round
                @click="collect(item, false)"
                style="padding: 3px 5px"
              >
                取消关注
              </el-button>
              <el-button
                type="danger"
                size="mini"
                round
                @click="finished(item.id)"
                style="padding: 3px 5px; margin-left: 5px"
                v-if="!item.finished"
              >
                完成操作
              </el-button>
              <div v-for="(stopUpData, idx) in stopUpDatas" :key="idx">
                {{ stopUpData.datetime
                }}<b
                  title="涨停数/近五日总涨停数/跌停数"
                  style="margin-left: 5px"
                  >({{ stopUpData.sectionStopUpCount[item.info.section] }}/{{
                    stopUpData.sectionCount[item.info.section]
                  }}/{{
                    stopUpData.sectionStopDownCount[item.info.section]
                  }})</b
                >
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <img
              :src="`https://webquoteklinepic.eastmoney.com/GetPic.aspx?nid=${
                item.info.eastMoneyFullCode
              }&type=M&unitWidth=-5&ef=&formula=KDJ&AT=1&imageType=KXL&timespan=${Math.random()}`"
              :alt="`https://webquoteklinepic.eastmoney.com/GetPic.aspx?nid=${item.info.eastMoneyFullCode}&type=M&unitWidth=-5&ef=&formula=KDJ&AT=1&imageType=KXL&timespan=`"
            />
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <img
              :src="`http://webquoteklinepic.eastmoney.com/GetPic.aspx?nid=${
                item.info.eastMoneyFullCode
              }&type=&unitWidth=-6&ef=&formula=KDJ&AT=1&imageType=KXL&timespan=${Math.random()}`"
              :alt="`http://webquoteklinepic.eastmoney.com/GetPic.aspx?nid=${item.info.eastMoneyFullCode}&type=&unitWidth=-6&ef=&formula=KDJ&AT=1&imageType=KXL&timespan=`"
            />
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <img
              :src="`https://webquoteklinepic.eastmoney.com/GetPic.aspx?nid=${
                item.info.eastMoneyFullCode
              }&type=M30&unitWidth=-5&ef=&formula=KDJ&AT=1&imageType=KXL&timespan=${Math.random()}`"
              :alt="`https://webquoteklinepic.eastmoney.com/GetPic.aspx?nid=${item.info.eastMoneyFullCode}&type=M30&unitWidth=-5&ef=&formula=KDJ&AT=1&imageType=KXL&timespan=`"
            />
          </div>
        </el-col>
      </el-row>
      <div class="pagination" v-if="tableData.length">
        <el-pagination
          v-if="showPage"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="query.page"
          :page-size="query.limit"
          layout="total, prev, pager, next"
          :total="totalElement"
        ></el-pagination>
      </div>
    </div>
    <el-empty
      style="margin-top: 200px"
      description="还未关注任何股票"
      v-if="!tableData.length && !loading"
    >
    </el-empty>
    <el-dialog title="K线图" :visible.sync="dialogVisible" width="90%">
      <div class="kline-imgs">
        <img
          :src="`http://webquoteklinepic.eastmoney.com/GetPic.aspx?nid=${
            kLineItem.info.eastMoneyFullCode
          }&type=&unitWidth=-6&ef=&formula=KDJ&AT=1&imageType=KXL&timespan=${Math.random()}`"
          :alt="`http://webquoteklinepic.eastmoney.com/GetPic.aspx?nid=${kLineItem.info.eastMoneyFullCode}&type=&unitWidth=-6&ef=&formula=KDJ&AT=1&imageType=KXL&timespan=`"
        />

        <img
          :src="`https://webquoteklinepic.eastmoney.com/GetPic.aspx?nid=${
            kLineItem.info.eastMoneyFullCode
          }&type=M&unitWidth=-5&ef=&formula=KDJ&AT=1&imageType=KXL&timespan=${Math.random()}`"
          :alt="`https://webquoteklinepic.eastmoney.com/GetPic.aspx?nid=${kLineItem.info.eastMoneyFullCode}&type=M&unitWidth=-5&ef=&formula=KDJ&AT=1&imageType=KXL&timespan=`"
        />
        <img
          :src="`https://webquoteklinepic.eastmoney.com/GetPic.aspx?nid=${
            kLineItem.info.eastMoneyFullCode
          }&type=M30&unitWidth=-5&ef=&formula=KDJ&AT=1&imageType=KXL&timespan=${Math.random()}`"
          :alt="`https://webquoteklinepic.eastmoney.com/GetPic.aspx?nid=${kLineItem.info.eastMoneyFullCode}&type=M30&unitWidth=-5&ef=&formula=KDJ&AT=1&imageType=KXL&timespan=`"
        />
        <img
          :src="`https://webquotepic.eastmoney.com/GetPic.aspx?imageType=t&type=M4&nid=${
            kLineItem.info.eastMoneyFullCode
          }&timespan=${Math.random()}`"
          :alt="`https://webquotepic.eastmoney.com/GetPic.aspx?imageType=t&type=M4&nid=${kLineItem.info.eastMoneyFullCode}&timespan=`"
        />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import Api from "@/api/index";
import Briefly from "@/layout/components/Briefly";
import Lifeblood from "@/components/Lifeblood";
import pubsub from "pubsub-js";
import { myId } from "@/utils";

export default {
  components: { Briefly ,Lifeblood},
  computed: {
    ...mapGetters(["name"]),
  },
  data() {
    return {
      kLineItem: { info: {} },
      dialogVisible: false,
      showPage: false,
      tableModel: true,
      tableData: [],
      query: {
        keyword: "",
        section: "",
        orderBy: 0,
        limit: 200,
        page: 1,
      },
      gender: {
        female: "女",
        male: "男",
      },
      totalElement: 0,
      loading: false,
      yesterday: {},
      stopUpDatas: [],
      sections: [],
      dragonLayers: [],
      sectionCount: {},
      myInterval: null,
      //

    };
  },
  watch: {
    "query.keyword"(val) {
      this.query.page = 1;
      this.getData();
    },
    "query.section"(val) {
      this.query.page = 1;
      this.getData();
    },
    "query.page"(val) {
      this.getData();
      this.setStateData(val);
    },
    "query.limit"(val) {
      this.query.page = 1;
      this.getData();
    },
    "query.orderBy"(val) {
      this.query.page = 1;
      this.getData();
    },
  },
  methods: {
    doShowKLine(item) {
      this.kLineItem = item;
      this.dialogVisible = true;
      this.$forceUpdate();
    },
    close() {
      this.getData();
    },
    //
    setStateData(nowPage) {
      let stateData = {
        nowPage,
      };
      this.$router.replace({
        path: this.$route.path,
        query: {
          stateData: this.$base64.encode(JSON.stringify(stateData)),
        },
      });
    },
    handleSizeChange(val) {
      this.limit = val;
    },
    handleCurrentChange(val) {
      this.nowPage = val;
    },
    getData() {
      this.loading = true;
      Api.stockCollect
        .all({
          ...this.query,
          page: this.query.page - 1,
          createBy: myId(),
        })
        .then((res) => {
          this.tableData = res.data;
          this.totalElement = res.total;
          this.yesterday = res.extra.yesterday;
          this.stopUpDatas = res.extra.stopUpDatas;
          this.sections = res.extra.stopUpDatas[0].sections;
          this.dragonLayers = res.extra.dragonLayers;
          this.sectionCount = res.extra.sectionCount;
          this.showPage = true;
          this.loading = false;
        })
        .catch((e) => (this.loading = false));
    },
    collect(stock, collected) {
      if (collected) {
        Api.stockCollect
          .modify({ code: stock.code })
          .then((res) => this.getData());
      } else {
        Api.stockCollect
          .cancel({ code: stock.code })
          .then((res) => this.getData());
      }
    },
    finished(id) {
      Api.stockCollect.finished({ targetId: id }).then((res) => this.getData());
    },

  },
  mounted() {
    if (this.$route.query.stateData) {
      console.log(JSON.parse(this.$base64.decode(this.$route.query.stateData)));
      const stateData = JSON.parse(
        this.$base64.decode(this.$route.query.stateData)
      );
      this.nowPage = stateData.nowPage;
      this.getData();
    } else {
      this.getData();
    }
    this.myInterval = setInterval(() => {
      $(".line img").each(function (i, e) {
        $(e).attr("src", $(e).attr("alt") + Math.random());
      });
    }, 5000);
    pubsub.subscribe("notify", (msgName, data) => {
      this.getData();
    });
  },
  destroyed() {
    clearInterval(this.myInterval);
    pubsub.unsubscribe("notify");
  },
};
</script>

<style lang="scss" scoped>
.left3px {
  margin-left: 3px;
}

.word_red {
  font-style: italic;
  font-size: 14px;
  color: red;
}

.word_green {
  font-style: italic;
  font-size: 14px;
  color: green;
}

.word_red_b {
  font-style: italic;
  font-size: 14px;
  color: red;
  font-weight: bold;
}

.common-bot {
  .line {
    padding: 5px 0;
    width: 100%;

    img {
      width: 100%;
    }
  }
}
.kline-imgs {
  img {
    width: 50%;
    padding: 10px;
    margin-bottom: 20px;
    vertical-align: top;
  }
}
.chart-cont{
  margin-bottom: 10px;
}

</style>
